<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <ul>-->
<!--        <li v-for="(xxx,i) of list"-->
<!--            @click="handleClick(i,$event)"-->
<!--            :style="index===i?'background:red':''"-->
<!--            :key="xxx.title"-->
<!--        >-->
<!--            {{xxx.title}}-&#45;&#45;{{i}}-->
<!--            <span v-if="xxx.ok">已完成</span>-->
<!--&lt;!&ndash;            <span v-else-if="">dd</span>&ndash;&gt;-->
<!--            <button v-else @click="add(i)">完成</button>-->
<!--        </li>-->
<!--    </ul>-->
    <div>计算属性--{{getNum}}</div>
    <div>计算属性--{{getNum}}</div>
    <div>计算属性--{{getNum}}</div>
    <div>计算属性--{{getNum}}</div>
    <div>函数---{{getNum2()}}</div>
    <div>函数---{{getNum2()}}</div>
    <div>函数---{{getNum2()}}</div>
    <div>函数---{{getNum2()}}</div>
</div>
<script>
    const vm = new Vue({
        el:'#app',
        //挂载点
        data:{
            list:[
                {
                title:'Vue.js',
                ok:true
            },
            {
              title:'React.js',
              ok:false
            },
             {
               title:'jQuery.js',
               ok:false
             }],
            index:0,
            n1:2,
            n2:4
        },
        computed:{
            getNum(){
                console.log('执行计算属性')
                return this.n1 + this.n2
            }
        },
        methods:{
            getNum2(){
                console.log('执行函数')
                return this.n1 + this.n2
            }
            // handleClick(i,e){
            //     console.log(e)
            //     console.log( this)
            //     this.index = i
            //     // e.target.style.backgroundColor = 'red'
            //
            //     //
            //     // for (let x in obj)
            // },
            // add(i){
            //     console.log(this.list[i])
            //     this.list[i].ok = true
            // }
        },
    })
    // function f1() {
    //     console.log('f1执行')
    // }
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
    // f1()
</script>
</body>
</html>